<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-02-03 13:28:21
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-03-18 17:50:22
-->
<template>
  <div>
    <div v-show="!showEdit">
      <div class="nav-head">
        <el-row type="flex" class="row-bg" flex-direction="row-reverse">
          <el-button size="mini" type="primary" @click="addScreening('add')">新增筛选</el-button>
          <el-button size="mini" type="primary" @click="addScreening('edit')">编辑筛选</el-button>
          <el-button size="mini" type="primary" @click="delScreening">删除筛选</el-button>
        </el-row>
      </div>
      <el-form
        ref="refEditFormModel"
        :model="formData"
        :rules="formRules"
        size="mini"
        label-width="0"
        :show-message="true"
      >
        <!-- 列表 -->
        <el-table
          :data="formData.list"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          lazy
          :load="load"
          @current-change="handleSelectChange"
        >
          <el-table-column
            prop="name"
            label="筛选名称"
            sortable
            width="150"
          />
          <el-table-column
            prop="type"
            label="类型"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.type === 'attr'?'属性':'固定值' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isOuterShow"
            label="是否展示在外层"
            width="120"
          >
            <template slot-scope="scope">
              {{ scope.row.isOuterShow === 1?'是':'否' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="isMultChoose"
            label="是否可多选"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.isMultChoose === 1?'是':'否' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="parentName"
            label="父级联动筛选"
            width="120"
          />
          <el-table-column label="排序">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="setTop(scope.row)">置顶</el-button>
              <el-button type="text" size="mini" @click="setUp(scope.row)">上移</el-button>
              <el-button type="text" size="mini" @click="setDown(scope.row)">下移</el-button>
              <el-button type="text" size="mini" @click="setFoot(scope.row)">置底</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastUpdateBy"
            label="修改人"
            width="100"
          />
          <el-table-column
            prop="lastUpdateTime"
            label="最后修改时间"
            width="180"
          />
        </el-table>
        <div class="pagination-container">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="pageSizes"
            :page-size="pagesize"
            layout="sizes, prev, pager, next, slot"
            :total="allTotal === 0 ? total : allTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <span class="el-pagination__jump">前往
              <el-input-number
                v-model="jumpPage"
                :controls="false"
                :min="1"
                @blur="showEnter"
                @keyup.enter.native="showEnter"
              />页</span>
          </el-pagination>
          <div v-show="total <= pagesize" class="pagination-info">当前显示
            <span>{{ handlePageRange(pagesize, currentPage) }}</span>，共
            <span class="total"> {{ formData.list.length }} </span> 条记录
          </div>
          <div v-show="total > pagesize" class="pagination-info">当前显示
            <span>{{ handlePageRange(pagesize, currentPage) }}</span>，共
            <span :class="[allTotal === 0 && total !== 0 ? 'total next-page': 'total']" @click="newEnter"> {{ allTotal === 0 && total !== 0 ? total-1 +'+': allTotal }}  </span> 条记录
          </div>
        </div>
      </el-form>
    </div>
    <add-select v-if="showEdit" ref="formDlg" :visible.sync="showEdit" :detail-data="detailData" :add-data="addData" @refreshTable="refreshTable" />
  </div>
</template>

<script>
import { json2FormData } from '@/utils'
import AddSelect from './EditModel/AddSelect'
import { deleteModel, setupModel, setdownModel, settopModel, setfootModel, searchModel } from '@/api/shopauxPlat/screenTemplate' // 新增编辑-保存,删除
export default {
  name: 'EditFormModel',
  components: { AddSelect },
  props: {
    detailDataModel: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      formData: {
        list: [] // table列表初始化
      },
      jumpPage: 1, // 分页前往默认值
      pagesize: 10, // 每页的条数
      pageSizes: [10, 20, 30, 50, 100],
      currentPage: 1, // 默认开始页面
      addEditFlag: false, // 增行/编辑后的标识，true时只显示保存和取消
      total: 0,
      allTotal: 0,
      showEdit: false,
      hasEdit: false,
      detailData: [],
      otherFilters: [],
      addData: [],
      hasselected: [],
      modelData: []
    }
  },
  computed: {},
  created() {
    const id = this.detailDataModel.id
    this.initData(id)
    if (!this.hasselected) {
      this.hasselected = []
    }
  },

  methods: {
    // 新增/编辑
    addScreening(type, data) {
      console.log(this.hasselected)
      if (type === 'edit') {
        if (this.hasselected === null || !this.hasselected.id) {
          this.$message.warning('请先选择一条数据')
          return
        }
        this.addData = this.detailDataModel
        this.detailData = this.hasselected
      } else {
        this.addData = this.detailDataModel
        this.detailData = ''
      }
      this.showEdit = true
    },
    handleSelectChange(val) {
      console.log(val)
      if (val !== null) {
        this.hasselected = val
      }
    },
    // 删除
    delScreening() {
      if (this.hasselected.length === 0) {
        this.$message.warning('请先选择一条数据')
        return
      }
      const id = this.hasselected.id
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteModel(id).then(res => {
          if (res.success === 1) {
            this.$message.success('删除成功')
            this.initData(this.detailDataModel.id)
          }
        })
      })
    },
    // 上移
    setUp(data) {
      setupModel(data).then(res => {
        if (res.success === 1) {
          this.$message.success('上移成功')
          this.initData(this.detailDataModel.id)
        }
      })
    },
    // 下移
    setDown(data) {
      setdownModel(data).then(res => {
        if (res.success === 1) {
          this.$message.success('下移成功')
          this.initData(this.detailDataModel.id)
        }
      })
    },
    // 置顶
    setTop(data) {
      settopModel(data).then(res => {
        if (res.success === 1) {
          this.$message.success('置顶成功')
          this.initData(this.detailDataModel.id)
        }
      })
    },
    // 置底
    setFoot(data) {
      setfootModel(data).then(res => {
        if (res.success === 1) {
          this.$message.success('置底成功')
          this.initData(this.detailDataModel.id)
        }
      })
    },
    // 切换页显示条数
    handleSizeChange(size) {
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再跳页')
        return false
      }
      this.pagesize = size
      this.jumpToFirstPage()
      this.refreshTable()
    },
    // 当操作在非第一页时，跳回第一页
    jumpToFirstPage() {
      this.currentPage = 1 // 不在第一页搜索时，调回第一页显示
      this.jumpPage = 1
      this.allTotal = 0
      this.total = 0
    },
    // 分页，获取下一页数据
    handleCurrentChange(currentPage) {
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再跳页')
        return false
      }
      this.jumpPage = currentPage
      this.currentPage = currentPage
      this.refreshTable()
    },
    // 前往第几页
    showEnter(ev) {
      this.jumpPage = ev.srcElement.value
      this.getTotal(ev.srcElement.value)
    },
    // 获取数据总条数
    getTotal(val) {
      if (this.allTotal !== 0) return
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再获取总页数')
        return false
      }
      const searchData = json2FormData({
        page: val,
        rows: this.pagesize,
        order: 'desc',
        sort: '',
        onlyCountFlag: false,
        filtersRaw: JSON.stringify(this.otherFilters)
      })
      searchModel(searchData, this.detailDataModel.id).then(res => {
        if (res.success === 1) {
          this.allTotal = res.data.total
          this.currentPage = res.data.page
          this.jumpPage = res.data.page
          this.formData.list = res.data.records
        }
      })
    },
    // 计算当前数据范围 如:1-20
    handlePageRange(size, currentPage) {
      const start = size * (currentPage - 1) + 1
      const end = size * currentPage

      const pageRange = `${start}-${end}`
      return pageRange
    },
    // 获取总数据条数
    newEnter() {
      this.getTotal(this.currentPage)
    },
    refreshTable(data) {
      this.hasEdit = data
      console.log(data)
      this.showEdit = false
      this.$nextTick(() => {
        this.initData(this.detailDataModel.id)
      })
    },
    initData(id) {
      const searchData = json2FormData({
        page: this.currentPage,
        rows: this.pagesize,
        order: 'desc',
        sort: '',
        onlyCountFlag: false,
        filtersRaw: JSON.stringify(this.otherFilters)
      })
      searchModel(searchData, id).then(res => {
        if (res.success === 1) {
          const { page, rows, total, records } = res.data
          const list = records
          this.total = total
          if (total <= page * rows) {
            this.allTotal = total
          }
          this.formData.list = list
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.pagination-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 8px 0 !important;
    .el-pagination{
      padding: 2px 0;
    }
    .pagination-info {
      padding: 2px 0 !important;
      font-size: 12px !important;
      .total {
        color: #3DC094;
      }
    }
    .el-pagination__jump {
      display: inline-block;
      position: relative;
      top: -4px;
      line-height: 28px;
      margin: 0 20px;
      /deep/ .is-without-controls {
        margin: 0 4px;
        width: 50px !important;
        /deep/ input {
          height: 28px;
        }
      }
    }
}
 .nav-head{
   margin: 20px 0 10px 0;
 }
  .basicpic{
   width: 100px;
   height: 100px;
   margin: 5px;
 }
</style>

